<template>
  <div class="top">
    <el-carousel :interval="4000" type="card" indicator-position="outside">
      <el-carousel-item v-for="item in imagesBox" :key="item.id">
        <img :src="item.idView" class="image" />
      </el-carousel-item>
    </el-carousel>
    <div class="whole">
      <h2>实验室活动</h2>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="tab-position"
      >
        <el-tab-pane
          label="3月24日"
          name="first"
          class="active"
          v-for="(itemread1, index) in homeRead"
          :key="itemread1.id"
        >
          <div class="active-title">
            <strong>{{ itemread1.titleread1 }}</strong>
          </div>
          <div class="active-content">
            {{ itemread1.content1 }}
          </div>
          <div class="active-img">
            <img
              src="https://www.aiit.edu.cn/uploads/25/image/public/202103/20210327161023_03yc7y9349.png"
              alt
            />
          </div>
          <router-link :to="'/news/' + itemread1.id">
            <button @click="btn(index)" class="layui-icon layui-icon-down">
              阅读全文
            </button>
          </router-link>
        </el-tab-pane>
        <el-tab-pane
          label="3月28日"
          name="second"
          class="active"
          v-for="itemread2 in homeRead"
          :key="itemread2.id"
        >
          <div class="active-title">
            <strong>{{ itemread2.titleread2 }}</strong>
          </div>
          <div class="active-content">
            {{ itemread2.content2 }}
          </div>
          <div class="active-img">
            <img
              src="https://cse.aiit.edu.cn/uploads/45/image/public/202103/20210322165607_tljdye0icf.png"
              alt
            />
          </div>
          <button @click="btntwo" class="layui-icon layui-icon-down">
            阅读全文
          </button>
        </el-tab-pane>
        <el-tab-pane
          label="4月2日"
          name="third"
          class="active"
          v-for="itemread3 in homeRead"
          :key="itemread3.id"
        >
          <div class="active-title">
            {{ itemread3.titleread3 }}
          </div>
          <div class="active-content">
            {{ itemread3.content3 }}
          </div>
          <div class="active-img">
            <img
              src="https://cse.aiit.edu.cn/uploads/45/image/public/202103/20210319162640_l1vmxsk8og.png"
              alt
            />
          </div>
          <button @click="btnthree" class="layui-icon layui-icon-down">
            阅读全文
          </button>
        </el-tab-pane>
      </el-tabs>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h2 class="titleh2">教学工作</h2>
            <hr />
            <el-row :gutter="20" v-for="item1 in teachList" :key="item1.id">
              <el-col :span="18">
                <div class="grid-content bg-purple">
                  <div class="titleStyle" :title='item1.title' @click="handelDetail(item1.id)">
                    {{ item1.title }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span>{{ item1.birthday | converTime }}</span>
                </div>
              </el-col>
            </el-row>
            <a href="https://cse.aiit.edu.cn/node/1560">
              <h4 class="titleh4">更多</h4>
            </a>
            <hr />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h2 class="titleh2">科研工作</h2>
            <hr />
            <el-row :gutter="20" v-for="item2 in scientificList" :key="item2.id">
              <el-col :span="18">
                <div class="grid-content bg-purple">
                  <div class="titleStyle" :title='item2.title' @click="handelDetail(item2.id)">
                    {{ item2.title }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span>{{ item2.birthday | converTime }}</span>
                </div>
              </el-col>
            </el-row>
            <a href="https://cse.aiit.edu.cn/node/1595">
              <h4 class="titleh4">更多</h4>
            </a>
            <hr />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h2 class="titleh2">中心动态</h2>
            <hr />
            <el-row :gutter="20" v-for="item3 in centerList" :key="item3.id">
              <el-col :span="18">
                <div class="grid-content bg-purple">
                  <div class="titleStyle" :title='item3.title' @click="handelDetail(item3.id)">
                    {{ item3.title }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span>{{ item3.birthday | converTime }}</span>
                </div>
              </el-col>
            </el-row>
            <a href="https://cse.aiit.edu.cn/node/1585">
              <h4 class="titleh4">更多</h4>
            </a>
            <hr />
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/Footer.vue";
import { getArticle } from "@/api/article/index";

export default {
  components: {
    Footer,
  },
  data() {
    return {
      student: this.$store.state.student.name,
      imagesBox: [
        {
          id: 0,
          idView:
            "https://cse.aiit.edu.cn/uploads/45/image/public/202104/20210405233129_gami88ajh0.jpg",
        },
        {
          id: 1,
          idView:
            "https://cse.aiit.edu.cn/uploads/45/image/public/201905/20190505135920_3ija4bafxr.jpg",
        },
        {
          id: 2,
          idView:
            "https://cse.aiit.edu.cn/uploads/45/image/public/201905/20190505135809_m97x43io4w.jpg",
        },
        {
          id: 3,
          idView:
            "https://cse.aiit.edu.cn/uploads/45/image/public/201905/20190505082859_fhweih8a1k.png",
        },
      ],
      activeName: "first",
      teachList:[],
      scientificList:[],
      centerList:[],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.student);
    },
    handelDetail(id){
      console.log(id);
      this.$router.push(`/news/${id}`);
    }
  },
    mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    getArticle()
      .then((response) => {
        const teachLists = [];
        const scientificLists = [];
        const centerLists = [];
        for (const iterator of response.data) {
          if (iterator.type === '教学工作') {
            teachLists.push({id: iterator.id ,title: iterator.title})
          }else if (iterator.type === '科研工作') {
            scientificLists.push({id: iterator.id ,title: iterator.title})
          }else if (iterator.type === '中心动态') {
            centerLists.push({id: iterator.id ,title: iterator.title})
          }
        }
        this.teachList= teachLists
        this.scientificList= scientificLists
        this.centerList= centerLists
      })
      .catch((error) => {
        console.log(error.data);
      });
  },
};
</script >

<style lang="scss" scoped>
.titleh2 {
  text-align: left;
  margin-bottom: 1px;
}
.titleh4 {
  text-align: right;
  margin-bottom: 1px;
  color: blue;
}

.image {
  width: 100%;
  height: 300px;
}
.top {
  padding: 20px 20px 0 20px !important;
}
.whole {
  // background-color: #ecf1f2;
  width: 90%;
  height: auto;
  margin: 0 auto;
}
.tab-position {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.active {
  border: #d2dae0 solid 1px;
  border-radius: 5%;
  height: 300px;
  position: relative;
  background-color: white;
}
.active-title {
  width: 350px;
  height: 25px;
  margin-left: 70px;
  border-radius: 5%;
  margin-top: 50px;
  font-size: 18px;
}
.active-content {
  width: 400px;
  height: 50px;
  margin-left: 70px;
  border-radius: 5%;
  margin-top: 20px;
  font-size: 13px;
}
.active-img {
  height: 200px;
  width: 320px;
  position: absolute;
  right: 50px;
  top: 50px;
}
.active-img img {
  height: 200px;
  width: 320px;
  border-radius: 5%;
}
.active button {
  text-align: center;
  margin-top: 90px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.titleStyle{
  cursor: pointer;
  width: 200rpx;
	overflow: hidden; /*隐藏*/
	white-space: nowrap;  /*不换行*/
	text-overflow: ellipsis;  /* 超出部分省略号 */	
}
</style>